<template>
  <div :id="id_name" style="width:180px;height:200px;"></div>
</template>
<script>
export default {
  name: "power",
  props: {
    id_name: String
  },
  methods:{
    drawLine(){
      var chartDom = document.getElementById(this.id_name)
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        series: [
          {
            type: 'gauge',
            progress: {
              show: true,
              width: 8
            },
            axisLine: {
              lineStyle: {
                width: 8
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: 8,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            axisLabel: {
              distance: 2,
              color: '#999',
              fontSize: 12
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 10,
              itemStyle: {
                borderWidth: 5
              }
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              fontSize: 20,
              offsetCenter: [0, '70%']
            },
            data: [
              {
                value: 70
              }
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    }
  },
  mounted() {
    this.drawLine();
  }
}
</script>

<style scoped>

</style>
